<template>
  <div class="login">
    <div class="box">
      <h3>巨创智控系统登入平台</h3>
      <el-form
        ref="ruleFormRef"
        style="max-width: 380px"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="50px"
        label-position="left"
        require-asterisk-position="right"
        class="demo-ruleForm"
        size="small"
      >
        <el-form-item label="账号" prop="username">
          <el-input v-model="ruleForm.username" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="ruleForm.password"
            type="password"
            autocomplete="off"
          />
        </el-form-item>

        <el-form-item class="remember">
          <el-checkbox v-model="isRemPwd" size="small" label="记住密码" />

          <div class="btns">
            <el-button type="primary" @click="submitForm(ruleFormRef)">
              提交
            </el-button>
            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from 'vue'
import { ElNotification, ElForm } from 'element-plus'
import type { FormInstance } from 'element-plus'
import useLoginStore from '@/store/login'
import { localCache } from '@/utils/cache'
import emitter, { api_success } from '@/emitter'

defineOptions({
  name: 'Login',
  inheritAttrs: false
})

const loginStore = useLoginStore()
const ruleFormRef = ref<FormInstance>()

const ruleForm = reactive({
  username: localCache.get('CACHE_NAME') ?? '',
  password: localCache.get('CACHE_PASSWORD') ?? ''
})

const isRemPwd = ref<boolean>(localCache.get('CACHE_IS_REM') ?? false)

watch(isRemPwd, (newVal) => {
  localCache.set('CACHE_IS_REM', newVal)
})

//#region 事件处理中心，订阅事件，采用发布订阅模式

emitter.on(api_success, (url: string) => {
  if (url !== '/acl/auth/login') return
  ElNotification({
    title: 'API请求成功',
    message: `api/${url}请求成功！`,
    type: 'success'
  })
  isRemPwd.value && loginStore.storeLoginInfo(ruleForm)
})

//#endregion

// 表单验证规则
const rules = reactive({
  username: [
    { required: true, message: '请输入账号!', trigger: 'blur' },
    { min: 5, max: 10, message: '账号长度在 5 到 10 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码!', trigger: 'blur' },
    { min: 6, max: 12, message: '密码长度在 6 到 12 个字符', trigger: 'blur' }
  ]
})

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      await loginStore.loginAccount(ruleForm)
    } else {
      ElNotification({
        title: 'Error',
        message: '账号和密码验证不通过！',
        type: 'error'
      })
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>

<style scoped lang="scss">
.login {
  // font-family: 'lsmin', 'Microsoft YaHei', Arial, Helvetica, sans-serif !important;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(to top, #142334, #798daf);
  display: flex;
  justify-content: center;
  align-items: center;
  .box {
    width: 400px;
    height: 200px;
    border: 1px solid #fff;
    padding: 20px;
    h3 {
      font-size: 25px;
      font-weight: bold;
      color: #fff;
      text-align: center;
      margin-bottom: 20px;
      // font-family: 'lsmin', 'Microsoft YaHei', Arial, Helvetica, sans-serif;
    }
    :deep(.el-form-item__label) {
      color: #fff;
      // font-size: 14px;
    }
    :deep(.el-form-item__content) {
      justify-content: space-between;
      :deep(.el-radio__label) {
        color: #fff;
      }
      .btns {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        width: 150px;
      }
    }
  }
}
</style>
